<template>
  <div class="page praticle-page flex-col">
    <!-- 新增的导航栏 -->
    <div class="answer-navbar">
      <div class="navbar-left">
        <el-button type="primary" size="small" @click="showQuestionDrawer" :icon="Menu">
          题目列表
        </el-button>
      </div>
        <div class="navbar-right">
          <span v-if="examTitle" class="exam-title">{{ examTitle }}</span>
          <img
            :src="userStore.userInfo?.headImage || defaultAvatar"
            :alt="userStore.userInfo?.nickName || '用户头像'"
            class="user-avatar"
            @click="goToUserCenter"
          />
          <el-button type="primary" size="small" @click="goBack" :icon="ArrowLeft">
            返回
          </el-button>
        </div>
    </div>

    <div class="box_8 flex-col">
      <div class="main-content flex-row" :class="{ 'left-hidden': isLeftPanelHidden }">
        <div
          class="left-panel flex-col"
          :class="{ hidden: isLeftPanelHidden }"
          :style="{ width: isLeftPanelHidden ? '0px' : leftPanelWidth + 'px' }"
        >
          <div class="image-wrapper_1 flex-row">
            <div class="left-section">
              <img class="thumbnail_2" src="@/assets/ide/xiaobiaoti.png" />
              <div class="question-nav">
                <span>题目描述</span>
              </div>
            </div>
            <div class="right-section">
              <div class="question-nav" @click="preQuestion">
                <el-icon>
                  <span>上一题</span>
                  <ArrowLeft />
                </el-icon>
              </div>
              <div class="question-nav" @click="nextQuestion">
                <el-icon>
                  <ArrowRight />
                  <span>下一题</span>
                </el-icon>
              </div>
            </div>
          </div>
          <div class="box_3 flex-col">
            <div class="question-title-row flex-row">
              <span class="question-title" :title="questionDetail.title">{{
                questionDetail.title
              }}</span>
              <el-button type="primary" size="small" class="ai-parse-button" @click="showAIParse">
                <el-icon><ChatDotRound /></el-icon>
                AI解析
              </el-button>
            </div>
            <span class="question-limit">
              <div v-if="questionDetail.difficulty === 1">
                题目难度：简单 时间限制：{{ questionDetail.timeLimit }} ms 空间限制：{{
                  questionDetail.spaceLimit
                }}
                字节
              </div>
              <div v-if="questionDetail.difficulty === 2">
                题目难度：中等 时间限制：{{ questionDetail.timeLimit }} ms 空间限制：{{
                  questionDetail.spaceLimit
                }}
                字节
              </div>
              <div v-if="questionDetail.difficulty === 3">
                题目难度：困难 时间限制：{{ questionDetail.timeLimit }} ms 空间限制：{{
                  questionDetail.spaceLimit
                }}
                字节
              </div>
            </span>
            <div class="question-content-wrapper">
              <span class="question-content" v-html="questionDetail.content"></span>
            </div>
            <!-- 底部操作按钮区域 - 固定在底部 -->
            <div class="question-footer">
              <div class="footer-divider"></div>
              <div class="footer-actions">
                <div class="action-btn" @click="toggleFavorite">
                  <el-icon v-if="!isFavorited" class="action-icon">
                    <Star />
                  </el-icon>
                  <el-icon v-else class="action-icon favorited">
                    <StarFilled />
                  </el-icon>
                  <span class="action-text">收藏</span>
                </div>
                <div class="action-btn" @click="shareQuestion">
                  <el-icon class="action-icon">
                    <Share />
                  </el-icon>
                  <span class="action-text">分享</span>
                </div>
                <div class="action-btn" @click="reportError">
                  <el-icon class="action-icon">
                    <Warning />
                  </el-icon>
                  <span class="action-text">报错</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 拖拽分割条 - 隐藏时不显示 -->
        <div v-if="!isLeftPanelHidden" class="resize-handle" @mousedown="startResize"></div>

        <!-- 显示题目描述按钮 - 只在隐藏时显示 -->
        <div
          v-if="isLeftPanelHidden"
          class="show-panel-button"
          @click="showLeftPanel"
          title="显示题目描述"
        >
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>

        <div class="right-panel flex-col">
          <div class="group_8 flex-col" style="position: relative;">
            <codeEditor
              ref="defaultCodeRef"
              @update:value="handleEditorContent"
              @submit="submitQuestion"
              @aiSuggest="showAICodeSuggest"
              :hasSubmittedCode="!!lastSubmittedUuid"
            />
            
            <!-- AI代码优化建议扫描动画覆盖层 -->
            <transition name="scan-overlay">
              <div v-if="isCodeSuggestVisible" class="ai-scan-overlay">
                <!-- 扫描线容器 - 独立于flex布局 -->
                <div class="scan-line-container">
                  <div class="scan-line"></div>
                </div>
                <!-- 其他内容使用flex布局 -->
                <div class="scan-content">
                  <div class="scan-animation">
                    <div class="scan-dots">
                      <div class="dot" v-for="i in 8" :key="i" :style="{ animationDelay: `${i * 0.1}s` }"></div>
                    </div>
                  </div>
                  <div class="scan-text">
                    <div class="scan-title">AI正在分析您的代码...</div>
                    <div class="scan-subtitle">请稍候，我们正在为您生成优化建议</div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>

    <!-- 判题结果弹窗 -->
    <el-dialog
      v-model="showResultDialog"
      title="判题结果"
      width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      :show-close="false"
      class="result-dialog"
      :modal-class="'result-dialog-modal'"
      :body-style="{ 'max-height': '70vh', 'overflow-y': 'auto' }"
      :append-to-body="true"
      :lock-scroll="false"
    >
      <div class="result-content">
        <div class="result-status">
          <div class="status-icon">
            <el-icon v-if="userQuestionResultVO.pass === 1" class="success-icon">
              <Check />
            </el-icon>
            <el-icon v-else-if="userQuestionResultVO.pass === 0" class="error-icon">
              <Close />
            </el-icon>
            <el-icon v-else class="warning-icon">
              <Warning />
            </el-icon>
          </div>
          <div class="status-text">
            <span v-if="userQuestionResultVO.pass === 0" class="text-error">未通过</span>
            <span v-else-if="userQuestionResultVO.pass === 1" class="text-success">通过</span>
            <span v-else-if="userQuestionResultVO.pass === 2" class="text-warning"
              >请先执行代码</span
            >
            <span v-else-if="userQuestionResultVO.pass === 3" class="text-info"
              >系统正在处理您的代码，请稍后...</span
            >
          </div>
        </div>

        <div
          v-if="userQuestionResultVO.pass === 0 && userQuestionResultVO.exeMessage"
          class="error-message"
        >
          <h4>异常信息：</h4>
          <p>{{ userQuestionResultVO.exeMessage }}</p>
        </div>

        <div
          v-if="
            userQuestionResultVO.userExeResultList &&
            userQuestionResultVO.userExeResultList.length > 0
          "
          class="test-results"
        >
          <h4>测试用例结果：</h4>
          <el-table :data="userQuestionResultVO.userExeResultList" stripe>
            <el-table-column prop="input" label="输入" />
            <el-table-column prop="output" label="预期结果" />
            <el-table-column prop="exeOutput" label="实际输出" />
            <el-table-column label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.output === scope.row.exeOutput ? 'success' : 'danger'">
                  {{ scope.row.output === scope.row.exeOutput ? '通过' : '失败' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <template #footer>
        <el-button
          type="primary"
          @click="closeResultDialog"
          :disabled="userQuestionResultVO.pass === 3"
        >
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- AI解析浮动框 -->
    <AIFloatBox
      ref="aiFloatBoxRef"
      v-model:visible="showAIFloatBox"
      title="AI解析"
      :icon="ChatDotRound"
      :model="aiAnalysisData.model"
      :content="aiAnalysisData.analysis"
      :loading="isAILoading"
      loading-text="AI正在分析题目..."
      :error="!aiAnalysisData.analysis && !isAILoading"
      empty-text="暂无AI解析内容"
      :enable-typewriter="true"
      :typewriter-speed="20"
      :should-trigger-typewriter="shouldTriggerAIAnalysisTypewriter"
      :initial-position="{ x: 100, y: 100 }"
      :initial-size="{ width: 400, height: 300 }"
      @close="closeAIFloatBox"
    />

    <!-- 题目列表抽屉 -->
    <el-drawer
      v-model="questionDrawerVisible"
      title="题目列表"
      direction="ltr"
      size="400px"
      :with-header="true"
    >
      <div class="question-drawer-content">
        <div v-if="questionList.length === 0 && !loadingQuestions" class="no-questions">
          暂无题目
        </div>

        <div v-else class="question-list" @scroll="handleScroll" ref="questionListRef">
          <div
            v-for="item in questionList"
            :key="item.questionId"
            class="question-item"
            :class="{ active: item.questionId == currentQuestionId }"
            @click="selectQuestion(item)"
          >
            <div class="question-info">
              <div class="question-title">{{ item.title }}</div>
              <span class="difficulty" :class="getDifficultyClass(item.difficulty)">
                {{ getDifficultyText(item.difficulty) }}
              </span>
            </div>
          </div>
          <!-- 加载更多 -->
          <div v-if="loadingQuestions" class="loading-more">
            <el-icon class="is-loading"><Loading /></el-icon>
            <span>加载中...</span>
          </div>

          <!-- 没有更多数据 -->
          <div v-if="noMoreQuestions && questionList.length > 0" class="no-more">
            没有更多题目了
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- AI代码优化建议浮动框 -->
    <AIFloatBox
      ref="aiSuggestBoxRef"
      v-model:visible="showAISuggestBox"
      title="AI代码优化"
      :icon="MagicStick"
      :model="aiSuggestResult?.model"
      :content="aiSuggestResult?.suggest"
      empty-text="暂无AI建议内容"
      :enable-typewriter="true"
      :typewriter-speed="20"
      :should-trigger-typewriter="shouldTriggerAISuggestTypewriter"
      :initial-position="{ x: 200, y: 150 }"
      :initial-size="{ width: 450, height: 350 }"
      @close="closeAISuggestBox"
    />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import codeEditor from '@/components/CodeEditor.vue'
import AIFloatBox from '@/components/AIFloatBox.vue'
import { v4 as uuidv4 } from 'uuid'
import {
  ArrowLeft,
  ArrowRight,
  Check,
  Close,
  Warning,
  ChatDotRound,
  Loading,
  Menu,
  Star,
  StarFilled,
  Share,
  MagicStick
} from '@element-plus/icons-vue'
import { ElLoading, ElNotification } from 'element-plus'
import 'element-plus/es/components/loading/style/css'
import { marked } from 'marked'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { getToken } from '@/utils/cookie'
import { getUserInfoService } from '@/apis/user'
import defaultAvatar from '@/assets/user/head_image.png'

// 配置 marked
marked.setOptions({
  breaks: true, // 支持换行
  gfm: true, // GitHub风格Markdown
  sanitize: false // 允许HTML标签
})
import {
  getQuestionDetailService,
  preQuestionService,
  nextQuestionService,
  getQuestionResultService,
  getQuestionAIAnalysisService,
  getQuestionListService,
  getAICodeSuggestService
} from '@/apis/question'
import {
  toggleFavoriteService,
  checkFavoriteService
} from '@/apis/favorite'
import {
  examNextQuestionService,
  examPreQuestionService,
  getExamFirstQuestionService,
  getExamDetailService
} from '@/apis/exam'
import { userSubmitService } from '@/apis/user'
import { ZlMessage } from '@/utils/message'

const questionDetail = reactive({})
const defaultCodeRef = ref()
const aiFloatBoxRef = ref()
const aiSuggestBoxRef = ref()

// 判题结果弹窗控制
const showResultDialog = ref(false)

// AI解析浮动框控制
const showAIFloatBox = ref(false)
const aiAnalysisData = ref({
  model: '',
  questionId: '',
  analysis: ''
})
const isAILoading = ref(false)
const shouldTriggerAIAnalysisTypewriter = ref(true) // 控制AI解析是否应该触发打字机效果

// AI解析缓存
const aiCache = ref(new Map())

// 全屏loading控制
let loadingInstance = null

// 拖拽分割条相关
const leftPanelWidth = ref(600) // 左侧面板初始宽度
const isResizing = ref(false)
const isLeftPanelHidden = ref(false) // 左侧面板是否隐藏
let startX = 0
let startWidth = 0
let dragThreshold = 0 // 拖拽阈值，用于检测是否继续拖拽

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

let questionId = route.query.questionId
let examId = route.query.examId
let examTitle = route.query.examTitle

console.log('examTitle: ', examTitle)

// 题目列表抽屉相关
const questionDrawerVisible = ref(false)
const questionList = ref([])
const loadingQuestions = ref(false)
const noMoreQuestions = ref(false)
const currentPage = ref(1)
const pageSize = ref(20)
const questionListRef = ref(null)
const currentQuestionId = ref(questionId)

// 收藏相关
const isFavorited = ref(false)

async function getQuestionDetail() {
  if (examId && (questionId == null || questionId == '')) {
    const eqrs = await getExamFirstQuestionService(examId)
    questionId = eqrs.data
    console.log('qId: ', questionId)
  }
  const res = await getQuestionDetailService(questionId)
  Object.assign(questionDetail, res.data)
  defaultCodeRef.value.setAceCode(questionDetail.defaultCode)
  // 更新当前题目ID
  currentQuestionId.value = questionId
  // 检查收藏状态
  checkFavoriteStatus()
}
getQuestionDetail()

async function preQuestion() {
  loadingInstance = ElLoading.service({
    lock: false,
    text: '加载中...'
  })

  try {
    // 确保loading至少显示500ms
    const [res] = await Promise.all([
      examId ? examPreQuestionService(examId, questionId) : preQuestionService(questionId),
      new Promise((resolve) => setTimeout(resolve, 500))
    ])

    questionId = res.data
    currentQuestionId.value = questionId
    getQuestionDetail()
  } finally {
    if (loadingInstance) {
      loadingInstance.close()
    }
  }
}

async function nextQuestion() {
  loadingInstance = ElLoading.service({
    lock: false,
    text: '加载中...'
  })

  try {
    // 确保loading至少显示500ms
    const [res] = await Promise.all([
      examId ? examNextQuestionService(examId, questionId) : nextQuestionService(questionId),
      new Promise((resolve) => setTimeout(resolve, 500))
    ])

    questionId = res.data
    currentQuestionId.value = questionId
    getQuestionDetail()
  } finally {
    if (loadingInstance) {
      loadingInstance.close()
    }
  }
}

const submitDTO = reactive({
  examId: '',
  questionId: '',
  programType: 0,
  userCode: ''
})

function handleEditorContent(content) {
  submitDTO.userCode = content
}

const userQuestionResultVO = ref({
  pass: 2, //默认值为2，未提交代码
  exeMessage: '',
  userExeResultList: []
})

const pollingInterval = ref(null)
let currentUuid = null

// AI代码优化建议相关
const lastSubmittedUuid = ref(null) // 记录上次提交的UUID
const lastRequestedUuid = ref(null) // 记录已经请求过AI建议的UUID
const isCodeSuggestVisible = ref(false) // 控制AI代码建议扫描动画显示
const isCodeSuggestLoading = ref(false) // 控制AI代码建议加载状态
const aiSuggestResult = ref(null) // 存储AI建议结果

// AI建议浮动框控制
const showAISuggestBox = ref(false) // 控制AI建议浮动框显示
const shouldTriggerAISuggestTypewriter = ref(true) // 控制AI建议是否应该触发打字机效果

function startPolling() {
  stopPolling() // 停止之前的轮询
  pollingInterval.value = setInterval(() => {
    getQuestionResult()
  }, 2000) // 每隔2秒请求一次
}

function stopPolling() {
  if (pollingInterval.value) {
    clearInterval(pollingInterval.value)
    pollingInterval.value = null
  }
}

async function submitQuestion() {
  submitDTO.examId = examId
  submitDTO.questionId = questionId
  // 生成唯一的UUID
  currentUuid = uuidv4()
  submitDTO.uuid = currentUuid

  await userSubmitService(submitDTO)

  // 记录上次提交的UUID，用于AI代码优化建议
  lastSubmittedUuid.value = currentUuid

  // 提交新代码时，关闭AI建议框但不清空结果
  // 这样用户可以点击按钮重新查看之前的建议结果
  showAISuggestBox.value = false
  // 不重置 lastRequestedUuid 和 aiSuggestResult，保持之前的状态

  // 清空上次的判题结果
  userQuestionResultVO.value = {
    pass: 3, // 设置为判题中状态
    exeMessage: '',
    userExeResultList: []
  }

  showResultDialog.value = true // 显示判题结果弹窗
  startPolling()
}

async function getQuestionResult() {
  const res = await getQuestionResultService(submitDTO.examId, submitDTO.questionId, currentUuid)
  userQuestionResultVO.value = res.data
  if (userQuestionResultVO.value.pass !== 3) {
    stopPolling()
  }
}

// 关闭判题结果弹窗
function closeResultDialog() {
  showResultDialog.value = false
}

// 开始拖拽
function startResize(e) {
  isResizing.value = true
  startX = e.clientX
  startWidth = leftPanelWidth.value
  dragThreshold = 0 // 重置拖拽阈值

  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)

  // 防止文本选择
  e.preventDefault()
}

// 处理拖拽
function handleResize(e) {
  if (!isResizing.value) return

  const deltaX = e.clientX - startX
  const newWidth = startWidth + deltaX

  // 设置最小和最大宽度限制
  const minWidth = 300 // 左侧最小宽度
  const rightMinWidth = 300 // 右侧最小宽度，确保按钮可见
  const maxWidth = window.innerWidth - rightMinWidth // 确保右侧有足够空间

  if (newWidth < minWidth) {
    // 拖拽到最小宽度以下
    leftPanelWidth.value = minWidth
    isLeftPanelHidden.value = false

    // 计算超出边界的距离作为拖拽阈值
    dragThreshold = minWidth - newWidth

    // 如果拖拽阈值超过50px，则隐藏面板
    if (dragThreshold > 50) {
      isLeftPanelHidden.value = true
    }
  } else if (newWidth > maxWidth) {
    // 拖拽到最大宽度以上
    leftPanelWidth.value = maxWidth
    isLeftPanelHidden.value = false
  } else {
    // 正常范围内，更新宽度
    leftPanelWidth.value = newWidth
    isLeftPanelHidden.value = false
    dragThreshold = 0
  }

  // 通知代码编辑器调整尺寸
  notifyEditorResize()
}

// 停止拖拽
function stopResize() {
  isResizing.value = false
  dragThreshold = 0
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)

  // 拖拽结束后再次通知编辑器调整尺寸
  setTimeout(() => {
    notifyEditorResize()
  }, 10)
}

// 显示左侧面板
function showLeftPanel() {
  isLeftPanelHidden.value = false
  // 恢复一个合理的默认宽度
  leftPanelWidth.value = 400

  // 显示面板后通知编辑器调整尺寸
  setTimeout(() => {
    notifyEditorResize()
  }, 10)
}

// 通知代码编辑器调整尺寸
function notifyEditorResize() {
  if (defaultCodeRef.value && defaultCodeRef.value.resizeEditor) {
    defaultCodeRef.value.resizeEditor()
  }
}

// AI解析功能
async function showAIParse() {
  // 如果已经显示，则关闭
  if (showAIFloatBox.value) {
    if (aiFloatBoxRef.value) {
      aiFloatBoxRef.value.closeWithAnimation()
    }
    return
  }

  // 显示浮动框
  showAIFloatBox.value = true

  // 检查缓存
  const cacheKey = `${questionId}_1`
  if (aiCache.value.has(cacheKey)) {
    const cachedData = aiCache.value.get(cacheKey)
    aiAnalysisData.value = cachedData
    // 使用缓存数据，不需要打字机效果
    shouldTriggerAIAnalysisTypewriter.value = false
    return
  }

  try {
    isAILoading.value = true

    const res = await getQuestionAIAnalysisService(questionId, 1)

    if (res.code === 1000) {
      aiAnalysisData.value = res.data
      // 缓存结果
      aiCache.value.set(cacheKey, res.data)
      // 获取新数据，需要打字机效果
      shouldTriggerAIAnalysisTypewriter.value = true
    } else {
      ZlMessage.error(res.msg || '获取AI解析失败')
    }
  } catch (error) {
    console.error('AI解析请求失败:', error)
    ZlMessage.error('获取AI解析失败，请稍后重试')
  } finally {
    isAILoading.value = false
  }
}



// 关闭AI解析浮动框
function closeAIFloatBox() {
  showAIFloatBox.value = false
}


// 题目列表相关方法
function showQuestionDrawer() {
  questionDrawerVisible.value = true
  if (questionList.value.length === 0) {
    loadQuestionList()
  }
}

async function loadQuestionList() {
  if (loadingQuestions.value || noMoreQuestions.value) return

  loadingQuestions.value = true
  try {
    let newQuestions = []

    if (examId) {
      // 如果是竞赛模式，获取竞赛详情（包含所有题目）
      if (currentPage.value === 1) {
        const res = await getExamDetailService(examId)
        newQuestions = res.data.examQuestionList || []
        noMoreQuestions.value = true // 竞赛模式下一次性加载所有题目
      }
    } else {
      // 普通题目列表，支持分页
      const res = await getQuestionListService({
        pageNum: currentPage.value,
        pageSize: pageSize.value
      })
      newQuestions = res.rows || []
    }

    if (newQuestions.length === 0) {
      noMoreQuestions.value = true
    } else {
      questionList.value.push(...newQuestions)
      currentPage.value++

      // 检查当前题目是否在列表中，如果不在则继续加载（仅普通模式）
      if (
        !examId &&
        currentQuestionId.value &&
        !questionList.value.find((q) => q.questionId == currentQuestionId.value)
      ) {
        if (!noMoreQuestions.value) {
          await loadQuestionList()
        }
      }
    }
  } catch (error) {
    console.error('加载题目列表失败:', error)
  } finally {
    loadingQuestions.value = false
  }
}

function handleScroll(event) {
  const { scrollTop, scrollHeight, clientHeight } = event.target
  if (scrollHeight - scrollTop <= clientHeight + 50) {
    loadQuestionList()
  }
}

function selectQuestion(question) {
  if (question.questionId == currentQuestionId.value) return

  currentQuestionId.value = question.questionId
  questionId = question.questionId
  
  // 更新URL中的题目ID
  const query = { ...route.query }
  query.questionId = questionId
  router.replace({ query })
  
  getQuestionDetail()
  questionDrawerVisible.value = false
}

function getDifficultyText(difficulty) {
  const difficultyMap = {
    1: '简单',
    2: '中等',
    3: '困难'
  }
  return difficultyMap[difficulty] || '未知'
}

function getDifficultyClass(difficulty) {
  const classMap = {
    1: 'easy',
    2: 'medium',
    3: 'hard'
  }
  return classMap[difficulty] || ''
}

// 跳转到用户个人中心
function goToUserCenter() {
  router.push('/home/user/detail')
}

// 返回上一页
function goBack() {
  router.go(-1)
}

// 切换收藏状态
async function toggleFavorite() {
  try {
    const res = await toggleFavoriteService(questionId)
    isFavorited.value = res.data
    
    // 显示通知
    if (res.data) {
      ElNotification({
        title: '收藏成功',
        message: '题目已添加到收藏夹',
        type: 'success',
        duration: 3000,
        showClose: true,
        onClick: () => {
          router.push('/home/user/detail')
        }
      })
    } else {
      ElNotification({
        title: '取消收藏',
        message: '题目已从收藏夹移除',
        type: 'info',
        duration: 2000,
        showClose: true
      })
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    ElNotification({
      title: '操作失败',
      message: '收藏操作失败，请重试',
      type: 'error',
      duration: 3000,
      showClose: true
    })
  }
}

// 检查是否已收藏
async function checkFavoriteStatus() {
  try {
    const res = await checkFavoriteService(questionId)
    isFavorited.value = res.data
  } catch (error) {
    console.error('检查收藏状态失败:', error)
  }
}

// 分享题目
function shareQuestion() {
  // TODO: 实现分享功能
  console.log('分享题目功能待实现')
}

// 报错
function reportError() {
  // TODO: 实现报错功能
  console.log('报错功能待实现')
}

// AI代码优化建议功能
async function showAICodeSuggest() {
  // 如果已经显示，则关闭
  if (showAISuggestBox.value) {
    if (aiSuggestBoxRef.value) {
      aiSuggestBoxRef.value.closeWithAnimation()
    }
    return
  }

  // 检查是否有上次提交的UUID
  if (!lastSubmittedUuid.value) {
    ZlMessage.warning('请先提交代码后再使用AI优化建议功能')
    return
  }

  // 检查是否已经为这个UUID请求过AI建议
  if (lastRequestedUuid.value === lastSubmittedUuid.value) {
    // 如果没有提交新代码，检查是否有有效的结果
    if (aiSuggestResult.value && aiSuggestResult.value.suggest) {
      // 如果有结果，直接显示上一次的优化建议结果（不需要打字机效果）
      shouldTriggerAISuggestTypewriter.value = false
      showAISuggestBox.value = true
      return
    }
    // 如果没有结果，继续执行请求逻辑（可能是之前请求失败了）
  }

  try {
    // 显示扫描动画
    isCodeSuggestVisible.value = true
    isCodeSuggestLoading.value = true

    // 调用API接口
    const res = await getAICodeSuggestService(questionId, lastSubmittedUuid.value)

    if (res.code === 1000 && res.data && res.data.suggest) {
      // 处理成功响应，存储结果并显示浮动框（需要打字机效果）
      shouldTriggerAISuggestTypewriter.value = true
      aiSuggestResult.value = res.data
      lastRequestedUuid.value = lastSubmittedUuid.value // 记录已请求的UUID
      showAISuggestBox.value = true
    } else {
    }
  } catch (error) {
  } finally {
    // 立即隐藏扫描动画
    isCodeSuggestVisible.value = false
    isCodeSuggestLoading.value = false
  }
}

// 关闭AI建议浮动框
function closeAISuggestBox() {
  showAISuggestBox.value = false
  // 不清空 aiSuggestResult，保留AI建议结果供二次查看
}


// 检查登录状态并获取用户信息
async function checkLoginAndGetUserInfo() {
  if (getToken()) {
    try {
      const userInfoRes = await getUserInfoService()
      userStore.setUserInfo(userInfoRes.data)
    } catch (error) {
      console.error('获取用户信息失败:', error)
    }
  }
}

// 组件挂载时检查登录状态
checkLoginAndGetUserInfo()
</script>

<style lang="scss" scoped>
.page {
  background-color: transparent;
  position: relative;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

// 导航栏样式
.answer-navbar {
  height: 50px;
  background-color: #f5f7fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
  z-index: 1000;

  .navbar-left {
    display: flex;
    align-items: center;
    
    .el-button {
      height: 30px;
      padding: 0 12px;
      font-size: 13px;
    }
  }

        .navbar-right {
          display: flex;
          align-items: center;
          gap: 15px;

          .exam-title {
            font-size: 14px;
            color: #606266;
            font-weight: 500;
          }

          .el-button {
            height: 28px;
            padding: 0 10px;
            font-size: 12px;
          }

          .user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid #e4e7ed;

            &:hover {
              border-color: #409eff;
              transform: scale(1.05);
            }
          }
        }
}

.box_8 {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
  padding-top: 20px; /* 添加顶部间距 20，本来是 60 */
  margin-bottom: 1px;
  box-sizing: border-box; /* 确保 padding 不影响高度计算 */

    .main-content {
      width: 100%;
      height: 100%;
      margin-top: 0;
      gap: 10px;
      box-sizing: border-box;

      &.left-hidden {
        gap: 0; // 隐藏左侧面板时去掉间距
      }

      .left-panel {
        flex-shrink: 0;
        overflow: hidden;

        &.hidden {
          width: 0 !important;
          min-width: 0;
        }

        .image-wrapper_1 {
          background-color: rgba(240, 240, 240, 1);
          border-radius: 10px 10px 0px 0px;
          height: 64px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;

          .left-section {
            display: flex;
            align-items: center;

            .thumbnail_2 {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }

            .question-nav {
              display: flex;
              align-items: center;
            }
          }

          .right-section {
            display: flex;
            align-items: center;
            gap: 15px;
            flex-wrap: nowrap;
            min-width: 0;

            .question-nav {
              cursor: pointer;
              display: flex;
              align-items: center;
              padding: 6px 10px;
              border-radius: 4px;
              transition: background-color 0.3s;
              min-height: 32px;
              box-sizing: border-box;
              white-space: nowrap;
              flex-shrink: 0;

              &:hover {
                background-color: rgba(0, 0, 0, 0.05);
              }

              .el-icon {
                display: flex;
                align-items: center;
                gap: 4px;
                width: 100%;
                height: 100%;
                font-size: 14px;
              }

              span {
                font-size: 14px;
              }
            }
          }
        }

        .box_3 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0px 0px 10px 10px;
          flex: 1;
          overflow: hidden;
          padding: 20px 20px 0 20px;
          position: relative;
          display: flex;
          flex-direction: column;

          .question-title-row {
            margin-bottom: 8px;
            align-items: center;
            justify-content: space-between;
            gap: 15px;

            .question-title {
              font-weight: bold;
              font-size: 20px;
              flex: 1;
              min-width: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .ai-parse-button {
              flex-shrink: 0;
              font-size: 11px;
              padding: 4px 10px;
              height: 26px;

              .el-icon {
                margin-right: 4px;
                font-size: 14px;
              }
            }
          }

          .question-limit {
            font-size: 14px;
            color: #909399;
            margin-bottom: 8px;
            line-height: 1.4;
          }

          .question-content-wrapper {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 15px;
            padding-right: 10px;
            margin-right: -10px;
          }

          .question-content {
            font-size: 16px;
            line-height: 1.6;
            color: #606266;
          }

          .question-footer {
            position: relative;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 5px;
            background-color: rgba(255, 255, 255, 1);
            border-top: 1px solid #e4e7ed;
          }

          .footer-actions {
            display: flex;
            align-items: center;
            gap: 15px;
          }

          .footer-divider {
            position: absolute;
            top: 0;
            left: -20px;
            right: -20px;
            height: 1px;
            background-color: #e4e7ed;
          }
        }
      }

      // 拖拽分割条样式
      .resize-handle {
        width: 12px;
        background-color: #f0f2f5;
        cursor: col-resize;
        position: relative;
        flex-shrink: 0;
        border-radius: 6px;
        margin: 0 4px;

        &:hover {
          background-color: #409eff;
        }

        &:active {
          background-color: #337ecc;
        }

        // 拖拽时的视觉反馈 - 圆角矩形
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 3px;
          height: 30px;
          background-color: #c0c4cc;
          border-radius: 2px;
        }

        &:hover::before {
          background-color: white;
          height: 40px;
          width: 4px;
        }

        &:active::before {
          background-color: white;
          height: 50px;
          width: 5px;
        }
      }

      // 显示题目描述按钮样式
      .show-panel-button {
        width: 24px;
        background-color: #f0f2f5;
        color: #c0c4cc;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 0 6px 6px 0;
        flex-shrink: 0;
        border: 1px solid #e4e7ed;
        animation: breatheColor 2s ease-in-out infinite;

        &:hover {
          background-color: #e4e7ed;
          color: #909399;
        }

        .el-icon {
          font-size: 14px;
        }
      }

      // 呼吸动画 - 只改变颜色
      @keyframes breatheColor {
        0%,
        100% {
          background-color: #f0f2f5;
          color: #c0c4cc;
        }
        50% {
          background-color: #e4e7ed;
          color: #909399;
        }
      }

      .right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0; // 移除强制最小宽度

        .group_8 {
          flex: 1;
          min-height: 0;
          min-width: 0;
        }

        .code-result {
          background-color: rgba(240, 240, 240, 1);
          border-radius: 10px 10px 0px 0px;
          height: 64px;
          margin-top: 20px;
          display: flex;
          align-items: center;

          .code-result-image {
            width: 27px;
            height: 27px;
            margin: 0 10px 0 20px;
          }

          .code-result-content {
            font-size: 16px;
          }
        }

        .group_15 {
          width: 100%;
          height: 200px;

          .section_1 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 0px 0px 10px 10px;
            width: 100%;
            height: 200px;

            .section_3 {
              width: 100%;
              height: 286px;
              margin: 24px 0 0 20px;

              .error-text {
                padding: 6px 20px;
                font-size: 14px;
                color: #666;
                background: #f7f7f7;
                border-left: 2px solid red;
                width: 95%;
              }

              .text-wrapper_2 {
                width: 217px;
                height: 40px;

                .text_1 {
                  width: 60px;
                  height: 40px;
                  overflow-wrap: break-word;
                  color: rgba(7, 126, 255, 1);
                  font-size: 20px;
                  font-family: MicrosoftYaHei;
                  font-weight: normal;
                  text-align: left;
                  white-space: nowrap;
                  line-height: 40px;

                  &.red {
                    color: red;
                  }

                  &.info {
                    color: #32c5ff;
                  }

                  &.success {
                    color: green;
                  }

                  &.warning {
                    color: orange;
                  }
                }
              }
            }
          }
        }
      }
    }

  .group_6 {
    background-color: rgba(241, 241, 241, 1);
    width: 21px;
    height: 874px;
    justify-content: flex-center;
    margin: 10px 0 0 923px;

    .thumbnail_3 {
      width: 9px;
      height: 6px;
      margin: 10px 0 0 6px;
    }

    .group_7 {
      background-color: rgba(192, 192, 192, 1);
      width: 16px;
      height: 296px;
      margin: 10px 0 0 3px;
    }

    .thumbnail_4 {
      width: 9px;
      height: 6px;
      margin: 536px 0 10px 6px;
    }
  }

  .group_11 {
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.06);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    position: absolute;
    left: 82px;
    top: -9px;
    width: 284px;
    height: 218px;
  }
}

.dialog-footer {
  display: block;
  text-align: right;
  /* 确保内容右对齐 */
  margin-top: 16px;

  .dialog-button {
    width: 150px;
  }
}

// AI解析浮动框动画
.ai-box-enter-active {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ai-box-leave-active {
  transition: all 0.15s cubic-bezier(0.4, 0, 1, 1); // 关闭动画更快
}

.ai-box-enter-from {
  opacity: 0;
  transform: scale(0.8) translateY(-20px);
}

.ai-box-leave-to {
  opacity: 0;
  transform: scale(0.9) translateY(-10px); // 关闭时缩放和位移更小
}

// AI解析浮动框样式
.ai-float-box {
  position: fixed;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 200px;
  max-width: 80vw;
  max-height: 80vh;
  // 只在显示/隐藏时使用transition，拖拽时不使用
  transition:
    opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  &.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  // 拖拽时禁用transition
  &.dragging {
    transition: none !important;
  }

  .ai-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e4e7ed;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    cursor: move;
    user-select: none;

    .ai-box-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      color: #333;

      .el-icon {
        color: #409eff;
      }

      .el-tag {
        margin-left: 8px;
      }
    }

    .ai-box-close {
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      color: #999;
      transition: all 0.2s;

      &:hover {
        background: #f0f0f0;
        color: #666;
      }

      &:active {
        background: #e0e0e0;
        color: #333;
        transform: scale(0.95);
      }

      .el-icon {
        font-size: 16px;
      }
    }
  }

  // 关闭状态样式
  &.closing {
    .ai-box-close {
      background: #ffebee;
      color: #f44336;

      &:hover {
        background: #ffcdd2;
      }
    }
  }

  .ai-box-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;

    .ai-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      color: #409eff;
      font-size: 14px;

      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }

    .ai-analysis {
      .ai-text {
        transition: opacity 0.1s ease-out;

        // 使用marked默认样式，只调整基本间距
        :deep(p) {
          margin: 4px 0;
        }
      }
    }
  }

  // 关闭状态下的文字淡出效果
  &.closing {
    .ai-text {
      opacity: 0.3;
    }

    .ai-error {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      color: #f56c6c;
      font-size: 14px;

      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }
  }

  .resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #409eff;
    cursor: se-resize;
    border-radius: 0 0 8px 0;

    &:hover {
      background: #337ecc;
    }
  }
}

// 判题结果弹窗样式 - 简化版
:deep(.result-dialog) {
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
  }

  .el-dialog__header {
    // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    border-radius: 20px 20px 0 0;

    .el-dialog__title {
      font-size: 20px;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 30px;
    // background: #fafbfc;
  }

  .el-dialog__footer {
    padding: 20px 30px;
    border-radius: 0 0 20px 20px;
    text-align: center;

    .el-button {
      border-radius: 25px;
      padding: 12px 30px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(64, 158, 255, 0.3);
      }
    }
  }
}

:deep(.result-dialog-modal) {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  animation: modalFadeIn 0.3s ease-out;
}

// 确保弹框不影响页面滚动
:deep(.el-dialog__wrapper) {
  overflow: visible !important;
}

:deep(.el-overlay) {
  overflow: visible !important;
}

@keyframes dialogFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.result-content {
  .result-status {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 8px;

    .status-icon {
      margin-right: 15px;
      font-size: 24px;

      .success-icon {
        color: #67c23a;
      }

      .error-icon {
        color: #f56c6c;
      }

      .warning-icon {
        color: #e6a23c;
      }
    }

    .status-text {
      font-size: 18px;
      font-weight: bold;

      .text-success {
        color: #67c23a;
      }

      .text-error {
        color: #f56c6c;
      }

      .text-warning {
        color: #e6a23c;
      }

      .text-info {
        color: #409eff;
      }
    }
  }

  .error-message {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fef0f0;
    border: 1px solid #fbc4c4;
    border-radius: 6px;

    h4 {
      color: #f56c6c;
      margin: 0 0 10px 0;
    }

    p {
      color: #606266;
      margin: 0;
      white-space: pre-wrap;
    }
  }

  .test-results {
    h4 {
      color: #303133;
      margin: 0 0 15px 0;
    }

    :deep(.el-table) {
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #e4e7ed;

      .el-table__header {
        background-color: #f5f7fa;

        th {
          background: transparent;
          color: #606266;
          font-weight: 600;
          border: none;
        }
      }

      .el-table__body {
        tr {
          &:hover {
            background-color: #f5f7fa;
          }
        }
      }
    }

    :deep(.el-tag) {
      border-radius: 4px;
      font-weight: 500;
      padding: 4px 8px;
    }
  }
}

// 题目列表抽屉样式
.question-drawer-content {
  height: 100%;
  display: flex;
  flex-direction: column;

  .no-questions {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #909399;
    font-size: 14px;
  }

  .question-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px 10px;

    .question-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      margin-bottom: 8px;
      background-color: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background-color: #e9ecef;
        border-color: #409eff;
      }

      &.active {
        background-color: #ecf5ff;
        border-color: #409eff;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
      }

            .question-info {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .question-title {
                font-size: 14px;
                font-weight: 500;
                color: #303133;
                line-height: 1.4;
                flex: 1;
                margin-right: 10px;
              }

              .difficulty {
                font-size: 12px;
                padding: 2px 8px;
                border-radius: 12px;
                font-weight: 500;
                flex-shrink: 0;

                &.easy {
                  background-color: #f0f9ff;
                  color: #67c23a;
                }

                &.medium {
                  background-color: #fef7e6;
                  color: #e6a23c;
                }

                &.hard {
                  background-color: #fef0f0;
                  color: #f56c6c;
                }
              }
            }

      .current-indicator {
        color: #409eff;
        font-size: 16px;
      }
    }

    .loading-more {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      color: #909399;
      font-size: 14px;

      .el-icon {
        margin-right: 8px;
      }
    }

    .no-more {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      color: #c0c4cc;
      font-size: 14px;
    }
  }
}

/* 底部操作按钮样式 */
.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 4px 8px;
  border-radius: 4px;

  &:hover {
    background-color: #f5f7fa;
  }

  .action-icon {
    font-size: 14px;
    color: #909399;
    width: 14px;
    height: 14px;
    
    &.favorited {
      color: #ffd700;
    }
  }

  .action-text {
    font-size: 12px;
    color: #606266;
    white-space: nowrap;
  }
}

/* 题目列表抽屉样式 - 仅在此页面生效 */
:deep(.el-drawer) {
  /* 保持抽屉的正常背景色 */
  background-color: #ffffff !important;
  position: relative !important;
  
  .el-drawer__header {
    height: 50px !important;
    padding: 0 20px !important;
    margin-bottom: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .el-drawer__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .el-drawer__body {
    padding: 0 !important;
    padding-top: 50px !important;
    height: 100%;
    background-color: #ffffff !important;
  }
  
  /* 保持正常的遮罩层 */
  .el-drawer__wrapper {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
}

// AI代码优化建议扫描动画样式
.scan-overlay-enter-active,
.scan-overlay-leave-active {
  transition: all 0.3s ease;
}

.scan-overlay-enter-from,
.scan-overlay-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

.ai-scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1000;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.scan-line-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  height: 100%;
  width: 100%;
}

.scan-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.scan-animation {
  position: relative;
  width: 100%;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #409eff 50%, transparent);
  box-shadow: 0 0 15px rgba(64, 158, 255, 0.8);
  animation: scanLineMove 3s linear infinite;
  pointer-events: none;
  z-index: 20;
  /* 确保扫描线可见 */
  border-top: 1px solid #409eff;
}

.scan-dots {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409eff, #67c23a);
  animation: dotPulse 1.5s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.scan-text {
  text-align: center;
  color: #2c3e50;
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px 30px;
  border-radius: 15px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 15;
}

.scan-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #2c3e50;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.scan-subtitle {
  font-size: 16px;
  color: #5a6c7d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@keyframes scanLineMove {
  0% {
    top: 0px;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 1;
  }
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

// AI代码优化建议弹窗样式
:deep(.ai-suggest-dialog) {
  .el-dialog {
    border-radius: 12px;
    overflow: hidden;
  }

  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    border-radius: 12px 12px 0 0;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 30px;
    max-height: 60vh;
    overflow-y: auto;
  }

  .el-dialog__footer {
    padding: 20px 30px;
    border-radius: 0 0 12px 12px;
    text-align: center;
    border-top: 1px solid #e4e7ed;

    .el-button {
      border-radius: 20px;
      padding: 10px 30px;
      font-weight: 500;
    }
  }
}

.ai-suggest-content {
  .suggest-result {
    .model-info {
      margin-bottom: 20px;
      text-align: right;
    }

    .suggest-text {
      line-height: 1.8;
      color: #2c3e50;
      font-size: 14px;

      :deep(p) {
        margin: 12px 0;
      }

      :deep(code) {
        background: #f1f3f4;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 13px;
      }

      :deep(pre) {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 16px;
        overflow-x: auto;
        margin: 16px 0;

        code {
          background: none;
          padding: 0;
        }
      }

      :deep(ul), :deep(ol) {
        padding-left: 24px;
        margin: 12px 0;

        li {
          margin: 8px 0;
        }
      }

      :deep(strong) {
        font-weight: 600;
        color: #2c3e50;
      }
    }
  }

  .no-suggest {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 200px;
    color: #909399;
    font-size: 16px;

    .el-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }
  }
}
</style>
